<!DOCTYPE html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>


<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>


<html>
<head>
<link href="<c:url value="/bootstrap/css/bootstrap.min.css"/>" rel="stylesheet">
<link rel="stylesheet" media="all" type="text/css"
	href="<c:url value="/resources/css/styles.css" />">
<script src="<c:url value="/bootstrap/js/bootstrap.min.js"/>"></script>
<meta charset="utf-8">
<title>Travel Journal</title>
</head>
<body>
	<div class="header">
		<div class="topnav">
			<ul id="nav">
				<li><a href="/TravelJournal/">Log Out</a></li>
			</ul>
		</div>
	</div>


	<div id="content">
	  <div id="sidebar">
			<ul>
				<li><a href="/TravelJournal/welcome">Home</a></li>
				<li><a href="#">My Records</a></li>
				<li><a href="/TravelJournal/records/addrecord">Add Record</a></li>
				<li><a href="/TravelJournal/records/map">My Travel Map</a></li>
			</ul>
		</div>

		<div class="main-content">
			<h2>My Travel Records</h2>
			
			<c:if test="${not empty records}">
			<div class="container-fluid" >
				<table class="table table-hover">
					<tr>
						<th>&nbsp;</th>
						<th>
							Country
						</th>
						<th>
							City
						</th>
						<th>
							Start Date
						</th>
						<th>
							End Date
						</th>
					</tr>
					<c:forEach items="${records}" var="record">
	        			<tr>
	        				<td>
	        					<button type="button" class="btn" onclick="goToEdit(${record.id})">Edit</button>
	        					<button type="button" class="btn" onclick="goToDelete(${record.id})">Delete</button>
	        					
	        				</td>
	        				<td> 
		        				${record.country.name}
		        			</td>
	        			
		        			<td> 
		        				${record.city.name}
		        			</td>
		        			<td>
		        				<fmt:formatDate value='${record.startDate}'  type='date' pattern='MM/dd/yyyy'/>
		        				
		        			</td>
		        			<td>
		        				<fmt:formatDate value='${record.endDate}'  type='date' pattern='MM/dd/yyyy'/>
		        				
		        			</td>
	        			</tr>
	    			</c:forEach>
				</table>
			</div>	
			</c:if>

		</div>

		<div class="clear"></div>
	</div>
	<script type="text/javascript">
	function goToEdit(id){
		window.location.href="/TravelJournal/records/updaterecord/" + id;
	}
	function goToDelete(id){
		window.location.href="/TravelJournal/records/delete/" + id;
	}
	</script>
</body>
</html>
